<script setup>
import {onShow,onLoad,onReady} from '@dcloudio/uni-app'
import { useMemberStore } from '/stores/modules/member.js'
import {reqCartList,reqUpdateGoods,reqCheckAllStatus,reqAddCart,reqDelCartGoods} from '/api/cart.js'
import { getCurrentInstance,nextTick,ref,computed } from 'vue';
import {xtzDebounce,timerId} from "../../utils/xtzDebounce.js"
const {proxy} = getCurrentInstance()
const memberStore = useMemberStore()
const {token} = memberStore.profile
const swipeAction = ref(null)
onShow(async()=>{
	await getCartList()
	swipeAction.value&&swipeAction.value.closeAll()
})
//对商品的数量进行处理，确保输入框的值在0到200之间
const goodsTotalChange =(index,e)=>{
	// console.log(e.detail.value);
	let temp = cartList.value[index].count
	if(e.detail.value!==''){
		let tempCount = Number(e.detail.value)
		if(tempCount>0&&tempCount<=200){
			cartList.value[index].count=tempCount
		}else if(tempCount>200){			
			cartList.value[index].count=200
		}else{
			cartList.value[index].count=Infinity
			nextTick(()=>{
				cartList.value[index].count=temp
			})
		}
	}
}
const inputs = ref()
// 在输入框失去焦点的时候处理空字符串
const blurGoodsTotal = (index,e)=>{
	let temp = cartList.value[index].count
	// console.log(inputs.value);
	// console.log(e);
	if(e.detail.value===''){
		// 重置数据让视图强制更新
		cartList.value[index].count=Infinity
		nextTick(()=>{			
			cartList.value[index].count=temp
		})		
	}
}
// 商品的数量加和减
const countChange = async(sign,index,goodsId) =>{
	let temp = cartList.value[index].count
	if(sign<0){
		if(cartList.value[index].count===1) return
		cartList.value[index].count--
	}else{
		if(cartList.value[index].count>=200) return
		cartList.value[index].count++
	}
	// console.log(cartList.value[index].count);
	// console.log(temp);
	xtzDebounce(oneGoodsTotalChange,800)([temp,index,goodsId])
	// oneGoodsTotalChange(temp,index,goodsId)
	// console.log(cartList.value);
	// console.log(cartList.value);
}
const oneGoodsTotalChange=async(temp,index,goodsId)=>{
	const disCount = cartList.value[index].count-temp
	// return console.log({goodsId:goodsId,count:disCount});
	if(disCount===0) return
	const res = await reqAddCart({goodsId:goodsId,count:disCount},index)
	console.log(res);
	if(res.code===200){
		await getCartList()
		cartList.value[index].isChecked=1
	}
}
const cartList = ref([])
// 获取商品列表
const getCartList = async()=>{
	if(!token) return
	const res =await reqCartList()
	cartList.value = res.data
	// console.log(res);
}
// 如果未登录提示用户去登录页
const goLogin = ()=>{
	uni.reLaunch({
		url:"/pages/login/login"
	})
}
// 改变商品是否选中
const changeIschecked =async(index,goodsId)=>{
	cartList.value[index].isChecked=cartList.value[index].isChecked?0:1
	const res = await reqUpdateGoods(goodsId,cartList.value[index].isChecked)
	// console.log(res);
	if(res.code ==200){
		await getCartList() //更新成功重新获取商品列表
	}
}
let checkedAllStatus = ref()
const checkedAll =async()=>{
	const isCheckedNumber = checkedAllBg.value?0:1
	const res = checkedAllBg.value?await reqCheckAllStatus(isCheckedNumber):await reqCheckAllStatus(isCheckedNumber)
	if(res.code===200){
		await getCartList()	
	}
}
let cartCountPrice =computed(()=>{
	return cartList.value.reduce((val,val1)=>{
		if(val1.isChecked===1){
			return	val+val1.count*val1.price
		}else{
			return val+0
		}
	},0)
})
let checkedAllBg =computed(()=>{
	return cartList.value.every(item => item.isChecked===1)
})
// 滑动模块的删除选项
let options = ref(	
	 [  
		{
			text: '删除',
			style: {
				backgroundColor: '#F56C6C'
			}
		}
	]
)
// 删除商品
const deleteOneGoods =async(id)=>{
	// console.log(id);
	const res = await proxy.$modal({content:'您确认删除该商品吗？'})
	console.log(res);
	if(res){
		const res = await reqDelCartGoods(id)
		if(res.code===200){
			await getCartList()
		}
	}
}

const goPay = () =>{
	if(cartCountPrice.value===0){
		proxy.$toast({title:'请选择需要购买的商品'})
		return
	}
	uni.navigateTo({
		url:'/pagesPay/detail/detail'
	})
}
</script>

<template>
	<view v-if="token" class="cart">
		<template v-if="cartList.length===0">
			<view class="null-goods">
				<image src="../../static/null-goods.png" mode="aspectFit"></image>
				<view class="null-goods-tit">没有商品，请添加商品到购物车</view>
			</view>
		</template>
		<template v-else>
			<scroll-view scroll-y="true" >
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item
						:right-options="options"
						v-for="(item,index) in cartList" v-bind:key="item.goodsId"
						show="none"
						:auto-close="true"
						@click="deleteOneGoods(item.goodsId)"
					>
						<view class="cart-goods-card">
							<view class="is-check">	
								  <view :class="[cartList[index].isChecked===1?'bg':'checked-change']" @click="changeIschecked(index,item.goodsId)">
									  <text class="iconfont icon-duihao" style="color: white;"></text>
								  </view>
							</view>
							<view class="l">
								<image class="goods-img" :src="item.imageUrl"></image>
							</view>
							<view class="r">
								<view class="tit" ref="inputs">{{item.name}}</view>
								<view class="count-price">
									<view class="price-yuan">￥<text class="yuan">{{item.price}}</text></view>
									<view class="count">
										<button class="sub btn" @click="countChange(-1,index,item.goodsId)">-</button>
										<input type="number"
										 class="count-number"
										 :value="cartList[index].count" 
										 @blur="blurGoodsTotal(index,$event)"
										 @input="goodsTotalChange(item.goodsId,index,$event)"
										 >
										<button class="plus btn" @click="countChange(1,index,item.goodsId)">+</button>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</scroll-view>
			<view class="count-price-panel">
				<!--  -->
				<view class="is-check" @click="checkedAll">
					  <view :class="[checkedAllBg===true ? 'bg' :'checked-change']">
						  <text class="iconfont icon-duihao" style="color: white;"> </text>
					  </view>
					  <view>全选</view>
				</view>
				<view class="r">
					<view>合计:</view>
					<view class="price-sum">￥<text class="price">{{cartCountPrice}}</text></view>
					<view class="go-pay" @click="goPay">去结算</view>
				</view>
			</view>
		</template>
	</view>
	<view v-else class="go-login">
		<view>尊敬的用户您好，您还未登录！</view>
		<button @click="goLogin" class="login-btn">点击去登录页</button>
	</view>
</template>

<style scoped lang="scss">
:deep(.uni-swipe){
	margin-bottom: 16rpx;
}
.cart{
	padding: 20rpx 20rpx 90rpx 20rpx;
	.cart-goods-card{
		background: white;
		padding: 20rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: row;
		.is-check{
			display: flex;
			width: 30rpx;
			margin-right: 20rpx;
			justify-content: center;
			align-items: center;
			.checked-change{
				overflow: hidden;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				line-height: 30rpx;
				text-align: center;
				border: 2rpx solid #c5c5c5;
			}
			.bg{
				background: red;
				overflow: hidden;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				line-height: 30rpx;
				text-align: center;
				border: 1rpx solid transparent;
			}
		}
		.l{
			height: 200rpx;
			width: 200rpx;
			.goods-img{
				width: 100%;
				height: 100%;
			}
		}
		.r{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex:1;
			margin-left: 16rpx;
			.tit{
				font-size: 28rpx;
			}
			.count-price{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.price-yuan{
					color: #f3514f;
					.yuan{
						font-size: 36rpx;
						font-weight: bolder;
					}
				}
				.count{
					display: flex;
					text-align: center;
					.btn{
						padding-left: 0;
						padding-right: 0;
						width: 42rpx;
						height: 42rpx;
						background: #cacaca;
						line-height: 42rpx;						
					}
					.count-number{
						background: #cacaca;
						height: 42rpx;
						width: 48rpx;
						font-size: 24rpx;
						margin: 0 8rpx;
						line-height: 42rpx;		
						min-height: 42rpx;
						border-radius: 10rpx;						
					}
				}
			}
		}
	}
	.count-price-panel{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
		padding: 10rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 2;
		border-top: 1rpx solid #efefef;
		.is-check{
			display: flex;
			justify-content: center;
			align-items: center;
			.checked-change{
				overflow: hidden;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				line-height: 30rpx;
				text-align: center;
				border: 1rpx solid #c5c5c5;
				margin-right: 10rpx;
			}
			.bg{
				background: red;
				overflow: hidden;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				line-height: 30rpx;
				text-align: center;
				margin-right: 10rpx;
				border: 1rpx solid transparent;
			}
		}
		.r{
			display: flex;
			justify-content: center;
			align-items: center;
			.price-sum{
				margin: 0 16rpx;
				font-size: 24rpx;
				color:#f3514f;
				.price{
					font-size: 40rpx;
					line-height: 40rpx;
				}
			}
			.go-pay{
				font-size: 26rpx;
				background: #f3514f;
				color:white;
				text-align: center;
				width: 140rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
			}
		}
	}
	.null-goods{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.null-goods-tit{
			font-size: 28rpx;
			margin-top: 16rpx;
			color:#7d7d7d;
		}
	}
}
	.go-login{
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		.login-btn{
			margin-top: 20rpx;
			border-radius: 50rpx;
			background: #f3514f;
			font-size: 26rpx;
			color:white;
		}
	}
</style>
